<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>权限列表</title>
    <header th:replace="header::html"></header>
</head>

<body class="">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">权限</a>
        <a>
          <cite>权限列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input type="text" name="username" placeholder="权限名" autocomplete="off" class="layui-input">
            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
            <a class="layui-btn" onclick="x_admin_show('新增用户','/role/add')"><i class="layui-icon"></i>新增角色</a>
        </form>
    </div>

    <table class="layui-hide" id="table" lay-filter="member"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>

<script>
    layui.use('table', function () {
        var table = layui.table,
            form = layui.form;
        table.render({
            elem: '#table'
            , url: '/permission/listPage' //数据接口
            , page: true //开启分页
            , cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', width: 60, align: 'center'}
                    , {field: 'parentId', title: '父级ID'}
                    , {field: 'name', title: '权限名'}
                    , {field: 'css', title: '样式'}
                    , {field: 'href', title: '链接'}
                    , {field: 'type', title: '类型', width:120}
                    , {field: 'permission', title: '权限值'}
                    ,{field: 'sort', title: '状态', width:120}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]
            ]
        });

        //监听工具条
        table.on('tool(member)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {

                    $.ajax({
                        url: "/permission/delete",
                        type: "GET",
                        data: {id: data.id},
                        dataType: 'json',
                        success: function (result) {
                            layer.alert("删除成功", {icon: 1}, function (index1) {
                                layer.close(index1);
                                x_admin_father_reload();
                            });
                        },
                    });

                });
            } else if (obj.event === 'edit') {
                x_admin_show('编辑用户信息', '/permission/edit/?id=' + data.id);
            }
        })

        //搜索
        form.on('submit(sreach)', function (data) {
            var username = data.field.username;
            table.render({
                elem: '#table'
                , url: '/role/findUserByFuzzyUserName' //数据接口
                , page: true //开启分页
                , where: {
                    "roleName": username
                }
                , cols: [
                    [ //表头
                        {type: 'checkbox', fixed: 'left'}
                        , {field: 'id', title: 'ID', width: 60, align: 'center'}
                        , {field: 'name', title: '角色名'}
                        , {field: 'description', title: '描述'}
                        // ,{field: 'status', title: '状态', width:120}
                        , {field: 'updateTime', title: '最后操作时间'}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                    ]
                ]
            });
            return false;
        });
    });
</script>
</body>
</html>